<template>
	<view class="assistant-info-layout">
		<view class="name-info-layout">
			<assistant-computed-info type="avatar2" :avatar="itemData.sculptureUrl" :picture="itemData.picture"></assistant-computed-info>
			<view class="center-view">
				<view class="row">
					<view class="name">{{itemData.name}}</view>
					<assistant-computed-info type="sex" :sex="itemData.sex"></assistant-computed-info>
					<view class="age">{{itemData.age||1}}岁</view>
				</view>
				<view style="height: 8rpx;"></view>
				<assistant-computed-info type="state2" :state="itemData.orderReceivingState" :stateText="itemData.orderReceivingStateDesc"></assistant-computed-info>
			</view>
			<view class="price">{{(itemData.gradePriceStr||0)}}元/小时</view>
		</view>
		<view style="height: 10rpx;"></view>
		<view class="service-time">服务时间：{{getWorkTime(itemData.businessHoursStart, itemData.businessHoursEnd)}}</view>
		<assistant-computed-info type="tag" :labelDescList="itemData.labelDescList"></assistant-computed-info>
		<view class="describe">{{itemData.introductory||'这个人很懒，什么也不想写～'}}</view>
		<view class="statistics-layout" v-if="showFollow">
			<view class="content-item" v-if="false">
				<view class="content">1.2万</view>
				<view class="title">关注</view>
			</view>
			<view class="content-item">
				<view class="content">{{itemData.orderNumber||'0'}}</view>
				<view class="title">服务订单</view>
			</view>
			<view style="flex: 1;"></view>
			<view class="follow" v-if="false">关注</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showFollow: {
				type: Boolean,
				default: true
			},
			itemData: {
				type: Object,
			},
		},
		computed: {
			getWorkTime(){
				return (start, end) => {
					if(start && end){
						return `${start}-${end}`
					}else{
						return '暂未设置'
					}
				}
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="less">
	.assistant-info-layout{
		margin-bottom: 2rpx;
		padding: 40rpx 32rpx 0 32rpx;
		box-sizing: border-box;
		z-index: 8;
		.name-info-layout{
			display: flex;
			flex-direction: row;
			align-items: center;
			.center-view{
				flex: 1;
				display: flex;
				flex-direction: column;
				.row{
					display: flex;
					flex-direction: row;
					align-items: center;
				}
				.name{
					font-size: 32rpx;
					line-height: 48rpx;
					color: #021624;
					margin-right: 16rpx;
				}
				.age{
					font-size: 28rpx;
					color: #585F70;
					line-height: 48rpx;
				}
			}
			.price{
				font-size: 36rpx;
				color: #FA384E;
			}
		}
		.service-time{
			font-size: 24rpx;
			color: #585F70;
			line-height: 48rpx;
			margin-bottom: 16rpx;
		}
		.tag-layout{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.tag-item{
				height: 48rpx;
				line-height: 48rpx;
				padding: 0 16rpx;
				background: #EEEEEE;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-right: 16rpx;
				font-size: 22rpx;
				color: #585F70;
			}
		}
		.describe{
			font-size: 24rpx;
			color: #ABAFB7;
			line-height: 48rpx;
			margin-top: 16rpx;
			margin-bottom: 32rpx;
		}
		.statistics-layout{
			display: flex;
			flex-direction: row;
			margin-bottom: 32rpx;
			.content-item{
				display: flex;
				flex-direction: column;
				margin-right: 48rpx;
				align-items: center;
				.title{
					font-size: 22rpx;
					color: #585F70;
					line-height: 48rpx;
					margin-top: 4rpx;
				}
				.content{
					color: #021624;
					font-size: 32rpx;
					line-height: 48rpx;
				}
			}
			.follow{
				width: 176rpx;
				background-color: #FA384E;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				border-radius: 40rpx;
			}
		}
		
	}
</style>
